<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=750,maximum-scale=1.0,user-scalable=no">
	<title>个人信息</title>
	 <script src="js/jquery.1.7.2.min.js"></script>
    <script src="js/mobiscroll_002.js" type="text/javascript"></script>
	<script src="js/mobiscroll_004.js" type="text/javascript"></script>
	<link href="css/mobiscroll_002.css" rel="stylesheet" type="text/css">
	<link href="css/mobiscroll.css" rel="stylesheet" type="text/css">
	<script src="js/mobiscroll.js" type="text/javascript"></script>
	<script src="js/mobiscroll_003.js" type="text/javascript"></script>
	<script src="js/mobiscroll_005.js" type="text/javascript"></script>
	<link href="css/mobiscroll_003.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="css/information.css">
	<link rel="stylesheet" href="css/public.css">
		<script type="text/javascript">
		(function (doc, win) {
		    var docEl = doc.documentElement,
		        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		        recalc = function () {
		            var clientWidth = docEl.clientWidth;
		            if (!clientWidth) return;
		            if (clientWidth>=720) {
		            	 // docEl.style.fontSize ='100px';
		            }else{
		            	docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
		            } 
		        };
		    // Abort if browser does not support addEventListener
		    if (!doc.addEventListener) return;
		    win.addEventListener(resizeEvt, recalc, false);
		    doc.addEventListener('DOMContentLoaded', recalc, false);
		})(document, window);
	</script>
</head>
<body>
	<div class="content">
		<div class="head">
			<header class="header">
				<button>back</button>
				<p class="text">个人信息</p>
				<div class="clear"></div>
			</header>
		</div>
		
		<div class="head-portrait">
			<img src="images/mine_photo.png" alt="">
		</div>
		<div class="currency">
			<h3>昵称：<span class="nickname"> Siece</span><span class="modify"><a href="modified.html">修改</a></span></h3>
		</div>
		<div class="currency gender">
			<h3>性别：<span style="color:#ccc;" class="modify" >男</span></h3>
		</div>
		<div class="currency">
			<h3> <input id="appDate" type="text" >生日：<span class="modify" >获取星座标签</span></h3>
		</div>
		<div class="currency">
			<h3>家乡：<span class="modify">获更精准准口味推荐</span></h3>
		</div>
		<div class="currency">
			<h3>常居地<span class="modify">设置</span></h3>
		</div>
		<div class="currency">
			<h3>收获地址<span class="modify">修改/添加</span></h3>
		</div>
		<div class="currency">
			<h3>我的等级<span style="color:#ccc;" class="modify">查看等级</span></h3>
		</div>
		<div class="currency">
			<h3>会员身份<span class="modify">成为VIP享特权</span></h3>
		</div>
		<div class="currency">
			<h3>手机号<span style="color:#ccc;" class="modify">186****5150</span></h3>
		</div>
		<div class="currency">
			<h3>密码<span class="modify">修改</span></h3>
		</div>
		<div class="currency">
			<h3>第三方账号绑定<span class="modify"><img src="images/WeChat.jpg" alt=""><img src="images/QQ.jpg" alt=""></span></h3>
		</div>
	</div>
	<div class="dw-bg" id="dw-bg">
		<div class="bg"></div>
			<div class="show">
			<div class="boy">
				<h3>男</h3>
			</div>
		  	<div class="female">
		  		<h3>女</h3>
		  	</div>
		</div>
		<div class="cancel">
			<div class="cancel-h3">
		  		<h3>取消</h3>
		  	</div>
		</div>
	</div>
	  <script type="text/javascript">
			var gender=document.body.scrollHeight+"px";
			document.getElementById('dw-bg').style.height=gender;
			var cancel=document.body.clientWidth/2;
			
    </script>
	<script type="text/javascript">
        $(function () {
			var currYear = (new Date()).getFullYear();	
			var opt={};
			opt.date = {preset : 'date'};
			opt.datetime = {preset : 'datetime'};
			opt.time = {preset : 'time'};
			opt.default = {
				theme: 'android-ics light', //皮肤样式
		        display: 'modal', //显示方式 
		        mode: 'scroller', //日期选择模式
				dateFormat: 'yyyy-mm-dd',
				lang: 'zh',
				showNow: true,
				nowText: "今天",
		        startYear: currYear - 10, //开始年份
		        endYear: currYear + 10 //结束年份
			};

		  	$("#appDate").mobiscroll($.extend(opt['date'], opt['default']));
		  	var optDateTime = $.extend(opt['datetime'], opt['default']);
		  	var optTime = $.extend(opt['time'], opt['default']);
		    $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
		    $("#appTime").mobiscroll(optTime).time(optTime);
		    $(".gender").click(function(){
		    	$(".dw-bg").show();
		    	$(".show").show();
		    	$(".cancel").show();
		    });
		  $(".cancel").click(function(){
				$(".dw-bg").hide();
				$(".show").hide();
				$(".cancel").hide();
		  })
        });
    </script>
</body>
</html>